<html>
<head>
<title>AdubyTree Style Demo</title>

<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jquery.adubytree.js" type="text/javascript"></script>
<link rel="StyleSheet" href="themes/adubytree.css" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function(){ 
	var jsondata ={id : "node-0" , data: "C:",
				children: [
					{ id : "node-1" ,data: "node1",
						children: [
							{ id : "node-1-1" ,data: "node1.1",
								children: [
								{ id : "node-1-1-1" ,data: "node1.1.1"},
								{ id : "node-1-1-2" ,data: "node1.1.2"}
								]},
							{id : "node-1-2" , data: "node1.2"},
							{id : "node-1-3" ,data: "node1.3"}
						] 
					},
					{id : "node-2" ,data: "node2"},
					{id : "node-3", data: "node3",
						children: [
							{ id : "node-3-1" ,data: "node3.1",
							children: [
								{id : "node-3-1-1" , data: "node3.1.1",
									children: [
										{ id : "node-3-1-1-1" , data: "node3.1.1-1"},
										{ id : "node-3-1-1-2" , data: "node3.1.1-2"}
									] 
								}
							] 
							}
						] 
					}
				] 
			};

 	var Aduby=$("#adubytreeBasicThemes").AdubyTree({
		dataType:"json",
		checkboxes:true,
		data:jsondata,
		themes	:	"Basic",
		treeType:"extend",
		onSelected:function(node){	
			//alert(node.id);
		}
		});
		
		
	$("#adubytreeBooksThemes").AdubyTree({
		dataType:"json",
		checkboxes:true,
		data:jsondata,
		themes	:	"Books",
		treeType:"extend",
		onClick:function(node){	
			//alert(node.id);
		}
		});

	$("#adubytreeOrgThemes").AdubyTree({
		dataType:"json",
		checkboxes:true,
		data:jsondata,
		themes	:	"Org",
		treeType:"extend",
		contextmenu:true,
		checkboxPos :"after"
		});
	$("#adubytreeOrgUserThemes").AdubyTree({
		dataType:"json",
		checkboxes:true,
		data:jsondata,
		themes	:	"OrgUser",
		treeType:"extend",
		checkboxPos     :"after",
		onMouseOut:function(node){	
			//alert(node.id);
		}
		});
		$("#adubytreeSampleThemes").AdubyTree({
		dataType:"json",
		checkboxes:true,
		data:jsondata,
		themes	:	"Sample",
		treeType:"extend",
		checkboxPos     :"after",
		onMouseOut:function(node){	
			//alert(node.id);
		}
		});
		$("#adubytreeVistaThemes").AdubyTree({
		dataType:"json",
		checkboxes:true,
		data:jsondata,
		themes	:	"Vista",
		treeType:"extend",
		checkboxPos     :"after",
		onMouseOut:function(node){	
			//alert(node.id);
		}
		});
	
	});

</script>
<style type="text/css">   
table, td {   
    border:1px solid #cccccc;   
    border-collapse:collapse;  
}   
</style>
</head>
<body >
<div align="center">
|<a href="./styledemo.html">AdubyTree Style</a>|<a href="./themesdemo.html">AdubyTree Themes</a>|<a href="./ajaxdemo.html">AdubyTree Ajax Demo</a>|<a href="./demo.html">AdubyTree Local Data</a>|
<table border="1">
	<tr>
		<td width="280px" bgcolor="#FFFFFF"><div align="center"><strong>Basic themes</strong></div></td><td width="280px" bgcolor="#FFFFFF"><div align="center" ><strong>Books themes</strong></div></td><td width="280px" bgcolor="#FFFFFF"><div align="center" ><strong>Org themes</strong></div></td>
	</tr>
	<tr>
		<td  valign ="top"><div id="adubytreeBasicThemes"></div></td>
		<td valign ="top"><div id="adubytreeBooksThemes"></div></td>
		<td valign ="top"><div id="adubytreeOrgThemes"></div></td>
	</tr>
	<tr>
		<td width="280px" bgcolor="#FFFFFF"><div align="center"><strong>OrgUser themes</strong></div></td><td width="280px" bgcolor="#FFFFFF"><div align="center" ><strong>Sample themes</strong></div></td><td width="280px" bgcolor="#FFFFFF"><div align="center" ><strong>Vista themes</strong></div></td>
	</tr>
	<tr>
		<td  valign ="top"><div id="adubytreeOrgUserThemes"></div></td>
		<td valign ="top"><div id="adubytreeSampleThemes"></div></td>
		<td valign ="top"><div id="adubytreeVistaThemes"></div></td>
	</tr>
</table> 

</body>
</html>